import useUpload from '@/hooks/useUpload';
import { proUploadConfig, uploadProps } from '@/my-config';
import { ProFormUploadButton, ProFormUploadButtonProps } from '@ant-design/pro-components';
import { useEffect, useRef } from 'react';
export const ImageUpload = (
    props: {
        value?: string;
        readonly?: boolean;
        onChange?: (value?: string) => void; // 修改返回类型为 void
        max?: number;
    } = {},
) => {
    const { uploadFileProps, fileList, setFileList, moveTo, itemRender } = useUpload();
    const valueString = useRef<string>();
    // 初始化 fileList
    useEffect(() => {
        // 只有当 props.value 与 valueString.current 不同时才更新 fileList
        if (props.value !== valueString.current) {
            setFileList(props.value);
            valueString.current = props.value || '';
        }
    }, [props]);

    // 处理上传文件变化
    useEffect(() => {
        // 只有当fileList所有状态为完成时才调用props.onChange
        if (fileList.every((item) => item.status === 'done')) {
            const value = fileList.map((item) => item.response?.url || item.response?.data).join(', ');
            valueString.current = value;

            props.onChange?.(value);
        }
    }, [fileList]);
    const prop: ProFormUploadButtonProps = {}
    return (
        <ProFormUploadButton
            readonly={props.readonly}
            accept='image/png,image/jpeg,image/gif'
            extra="支持jpg、png、gif、大小不超过20MB"
            labelCol={{ span: 0 }}
            listType='picture-card'
            {...proUploadConfig}
            {...uploadFileProps}
            max={props.max }
            fieldProps={{
                ...uploadProps,
                itemRender: itemRender(moveTo),
            }}
        />
        // 
    );
};